<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { OrderStatus, PayStatus, PayType, RefundStatus, RefundMoneyStatus, PickupStatus, RefundOrderStatus, LogisticsType } from '@/enum/order'
import { TableColumnData } from '@arco-design/web-vue'
import ViewImageBtn from '@/components/buttons/ViewImage.vue'

interface Data {
  label: string
  value: any
  type?: any
  span?: number
}
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])

/**门店信息 */
const storeData = ref<Data[]>([])
/**订单信息 */
const orderData = ref<Data[]>([])
/**商品信息 */
const goodsData = ref<Data[]>([])
const tableData = ref<Data[]>([])
const refundData = ref<Data[]>([])
const getInfo = () => {
  get({ url: '/server-shop/sys-seller/order/refund/info', data: { id: props.id } }, ({ data }) => {
    tableData.value = data.refundLogList

    /**订单 */
    orderData.value = [
      { label: '订单编号', value: data.orderNo },
      {
        label: '订单状态',
        value: (data.logisticsType === LogisticsType.快递 ? OrderStatus : PickupStatus)[data.orderStatus],
      },
      //   { label: '实付金额', value: data.orderPrice.toFixed(2) },
      //   { label: '优惠券抵扣', value: data.deductCoupon.toFixed(2) },
      //   { label: '余额抵扣', value: data.deductMoney.toFixed(2) },

      { label: '支付状态', value: PayStatus[data.payStatus] },
      // { label: '支付类型', value: PayType[data.payType] },
      { label: '发货时间', value: data.sendTime },
      { label: '支付时间', value: data.payTime },
      { label: '完成时间', value: data.finishTime },

      { label: '售后状态', value: RefundStatus[data.refundStatus] },
    ]
    /**售后订单 */
    const refundAddress = data.refundAddress && JSON.parse(data.refundAddress)
    refundData.value = [
      {
        label: '售后地址',
        value: refundAddress ? refundAddress.province + refundAddress.city + refundAddress.district + ' ' + refundAddress.address : '',
      },
      { label: '第三方退款单号', value: data.refundBizNo },
      { label: '退款金额', value: data.refundMoney },
      {
        label: '售后退款状态',
        value: RefundMoneyStatus[data.refundMoneyStatus],
      },
      { label: '售后状态', value: RefundOrderStatus[data.refundStatus] },
      { label: '售后单号', value: data.refundNo },
      { label: '退款时间', value: data.refundTime },
      {
        label: '售后类型',
        value: data.refundType == 1 ? '退款' : '退货退款',
      },

      {
        label: '申请原因',
        value: data.buyerMsg,
      },
      {
        label: '用户上传图片',
        value: data.buyerImg,
        type: 'viewImg',
      },
    ]
    if (data.logisticsType == LogisticsType.快递) {
      refundData.value.push({ label: '用户寄回物流', value: data.logisticsName }, { label: '用户寄回物流单号', value: data.logisticsNo })
    }
    /**商品 */
    const { goods } = data
    goodsData.value.push(
      ...[
        { label: '商品名称', value: goods.name },
        { label: '商品价格', value: goods.goodsPrice.toFixed(2) },
        { label: '商品数量', value: goods.goodsNum },
        { label: '商品规格', value: goods.goodsSpec },
        { label: '商户优惠券抵扣', value: data.deductCouponSeller },
        { label: '平台优惠券抵扣', value: data.deductCouponSystem },
      ]
    )

    goodsData.value.push({
      label: '商品总价',
      value: data.goodsPrice.toFixed(2),
      span: 3,
    })
    console.log('🚀 ~ file: ViewOrder.vue:151 ~ getInfo ~ goodsData:', goodsData)
  })
}

getInfo()
const columns: TableColumnData[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    slotName: 'id',
    align: 'center',
    width: 150,
  },
  {
    title: '售后ID',
    dataIndex: 'refundId',
    slotName: 'refundId',
    align: 'center',
    width: 150,
  },
  {
    title: '描述',
    dataIndex: 'remark',
    slotName: 'remark',
    align: 'center',
    width: 200,
    tooltip: true,
    ellipsis: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    slotName: 'createTime',
    align: 'center',
    width: 150,
  },
]
</script>
<template>
  <CModal v-model:visible="props.show" width="65%" :footer="false" title="查看售后订单" @cancel="emit('update:show', false)">
    <a-space style="display: table; margin: auto" direction="vertical" :size="20">
      <a-descriptions :column="3" bordered title="售后详情">
        <a-descriptions-item v-for="item of refundData" :label="item.label">
          <ViewImageBtn :imgs="item.value" v-if="item.type == 'viewImg'" />

          <span v-else>
            {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
          </span>
        </a-descriptions-item>
      </a-descriptions>
      <!-- <a-descriptions :column="3" bordered title="订单详情">
        <a-descriptions-item v-for="item of orderData" :label="item.label">
          {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
        </a-descriptions-item>
      </a-descriptions> -->
      <a-descriptions bordered title="订单商品">
        <a-descriptions-item v-for="item of goodsData" :label="item.label" :span="item.span ?? 1">
          {{ ![undefined, null, ''].includes(item.value) ? item.value : '' }}
        </a-descriptions-item>
      </a-descriptions>
      <p class="title">售后记录</p>
      <a-table :bordered="{ cell: true }" :data="tableData" :columns="columns" :pagination="false"> </a-table>
    </a-space>
  </CModal>
</template>
<style lang="less" scoped>
.title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5715;
}
</style>
